<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" >
      <el-form-item prop="storeId" style="width: 120px">
        <el-select v-model="queryParams.storeId" placeholder="仓库" clearable size="small">
          <el-option v-for="dict in storeOptions" :key="dict.id" :label="dict.label"
                     :value="dict.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="dealType" style="width: 180px">
        <el-select v-model="queryParams.dealType" placeholder="类型" clearable size="small">
          <el-option v-for="dict in dict.type.deal_type" :key="dict.value" :label="dict.label"
                     :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="taskNo">
        <el-input v-model="queryParams.taskNo" placeholder="申请编号搜索" clearable size="small"
                  @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item prop="source"  style="width: 150px">
        <el-select v-model="queryParams.source" placeholder="管理中心物品" clearable size="small">
          <el-option label="管理中心物品" value="0"/>
          <el-option label="非管理中心物品" value="1"/>
        </el-select>
      </el-form-item>
      <el-form-item prop="isTrailer" style="width: 120px">
        <el-select v-model="queryParams.isTrailer" placeholder="授权处置" clearable size="small">
          <el-option label="已授权中心处置" value="1"/>
          <el-option label="未授权中心处置" value="0"/>
        </el-select>
      </el-form-item>
      <el-form-item >
        <el-date-picker v-model="daterangeCreateTime" size="small" style="width: 240px" value-format="yyyy-MM-dd"
                        type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="danger" plain icon="el-icon-s-unfold" size="mini" :disabled="multiple" @click="handleSendAll"
                   v-hasPermi="['oms:task:add']"
        >下发
        </el-button>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                   v-hasPermi="['oms:task:add']"
        >新增
        </el-button>
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                   v-hasPermi="['oms:task:edit']"
        >修改
        </el-button>
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                   v-hasPermi="['oms:task:export']"
        >导出
        </el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="8" class="mb10">
        <el-radio-group v-model="queryParams.sendStatus" @change="radioChange" size="mini">
          <el-radio-button v-for="tab in tabs" :label="tab.label">
            <el-badge :value="tab.badge" class="item">
              {{ tab.name }}
            </el-badge>
          </el-radio-button>
        </el-radio-group>
        <el-radio-group v-model="xzTabVal" @change="xzTabChange"  size="mini" style="margin-left:30px">
          <el-radio-button v-for="tab in xzTabs" :label="tab.label">
            <el-badge :value="tab.badge" class="item">
              {{ tab.name }}
            </el-badge>
          </el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="16">
        <template v-for="item in statisticsOptions">
          <el-badge :value="item.totals" class="item ml10" :is-dot="item.totals>0?false:true"
                    :type="item.totals>0?'danger':'info'"
          >
            <el-button @click="statisticsChange(item)" size="mini"
                       :type="item.region == queryParams.region ? 'primary':''"
                       :plain="item.region == queryParams.region"
            >{{ item.regionName }}
            </el-button>
          </el-badge>
        </template>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="taskList" @selection-change="handleSelectionChange" border stripe>
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="申请编号" prop="taskNo" width="130">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleInfo(scope.row)">{{ scope.row.taskNo }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="申请部门" prop="deptName" min-width="120"/>
      <el-table-column label="物流配送" align="center" prop="delivery" min-width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.oms_out_delivery_type" :value="scope.row.delivery"/>
        </template>
      </el-table-column>
      <el-table-column label="配送部门" align="center" prop="deliveryDept" min-width="80"></el-table-column>
      <el-table-column label="管理中心物品" align="center" prop="deliveryDept" width="125">
        <template slot-scope="scope">
          <el-tag type="danger" size="small" v-if="scope.row.source == '1'">否</el-tag>
          <el-tag type="primary" size="small" v-else>是</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="授权管理中心处置" align="center" prop="deliveryDept" width="125">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.is_trailer_status" :value="scope.row.isTrailer"/>
        </template>
      </el-table-column>
      <el-table-column label="类型" align="center" prop="type" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.deal_type" :value="scope.row.dealType"/>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.oms_task_status" :value="scope.row.status"/>
        </template>
      </el-table-column>
      <el-table-column label="下发状态" align="center" prop="sendStatus" v-if="!queryParams.sendStatus" width="100">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.oms_send_status" :value="scope.row.sendStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="申请时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updateTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleInfo(scope.row)"
                     v-hasPermi="['oms:task:edit']"
          >查看
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-edit-outline"
                     v-hasPermi="['wms:deal:edit']" v-if="scope.row.checkStatus == '0' && scope.row.sendReStatus== '0' "
                     @click="handleCheck(scope.row)"
          >审核
          </el-button>
          <!--状态未完成,已审核或已下发,非管理中心物品或销毁-->
          <el-button size="mini" type="text" icon="el-icon-check"
                     v-hasPermi="['wms:deal:edit']"
                     v-if="scope.row.status == '0' && (scope.row.checkStatus == '1' || scope.row.sendReStatus== '1') && scope.row.isTrailer =='1' && scope.row.delivery=='3'"
                     @click="handleFinish(scope.row)"
          >完成
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                @pagination="getList"
    />
    <el-drawer :title="title" :visible.sync="open" size="75%" :before-close="close">
      <div class="mb20 ml20">
        <span style="font-size: 20px;">{{ form.taskNo }}</span>
        <div class="fr mr10">
          <el-button type="primary" v-if="form.status == '0'" size="mini" @click="handleUpdate(form)">编辑</el-button>
          <el-button size="mini" @click="handleSend(form)"
                     v-if=" form.status == '0' && form.sendReStatus == '0' || !form.sendReStatus"
          >下发
          </el-button>
        </div>
      </div>
      <el-card>
        <el-tabs v-model="activeName">
          <el-tab-pane label="申请详情" name="1">
            <el-card shadow="hover">
              <el-descriptions title="基本信息" :column="4" border>
                <el-descriptions-item label="申请单位" :span="2">{{ form.deptName }}</el-descriptions-item>
                <el-descriptions-item label="申请人">{{ form.name }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ form.tel }}</el-descriptions-item>
                <el-descriptions-item v-if="form.delivery == '0'" label="寄件地址" :span="4">{{ form.address }}
                </el-descriptions-item>
                <el-descriptions-item label="物流配送" v-if="form.isTrailer == '0'">
                  <dict-tag :options="dict.type.oms_out_delivery_type" :value="form.delivery"/>
                </el-descriptions-item>
                <el-descriptions-item label="授权管理中心处置">
                  <dict-tag :options="dict.type.is_trailer_status" :value="form.isTrailer"/>
                </el-descriptions-item>
                <el-descriptions-item label="处置数量">{{ form.properties }}</el-descriptions-item>
                <el-descriptions-item label="处置仓库">{{ form.storeName }}</el-descriptions-item>
                <el-descriptions-item label="有无钥匙" v-if="form.carKey">{{ form.carKey }}</el-descriptions-item>
                <el-descriptions-item label="有无行驶证" v-if="form.driveLicen">{{ form.driveLicen }}</el-descriptions-item>
                <el-descriptions-item label="无" v-if="form.othreNone">{{ form.othreNone }}</el-descriptions-item>
                <el-descriptions-item label="处置原因" :span="4">{{ form.remark }}</el-descriptions-item>
                <el-descriptions-item label="附件" :span="4">
                  <el-image v-if="form.oss && form.oss.length > 0" v-for="(pic,pindex) in form.oss"
                            style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                            fit="scale-down"
                            :preview-src-list="ossTransfer(form.oss,'list')"
                  ></el-image>
                </el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="取件信息" :column="4" border v-if="form.delivery== '1'" class="mt10">
                <el-descriptions-item label="取件人">{{ returnForm.pickuper }}</el-descriptions-item>
                <el-descriptions-item label="联系电话">{{ returnForm.pickupTel }}</el-descriptions-item>
                <el-descriptions-item label="证件类型">
                  <span v-if="'0' == returnForm.pickupCardType">身份证</span>
                  <span v-if="'1' == returnForm.pickupCardType">人民警察证</span>
                </el-descriptions-item>
                <el-descriptions-item label="证件号">{{ returnForm.pickupCard }}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions title="发还信息" :column="3" border v-if="form.dealType == '3' && form.isTrailer == '1'"
                               class="mt10"
              >
                <el-descriptions-item label="办案民警">{{ returnForm.police }}</el-descriptions-item>
                <el-descriptions-item label="民警电话">{{ returnForm.policeTel }}</el-descriptions-item>
                <el-descriptions-item label="发还人">{{ returnForm.person }}</el-descriptions-item>
                <el-descriptions-item :span="1.5" label="联系电话">{{ returnForm.personTel }}</el-descriptions-item>
                <el-descriptions-item :span="1.5" label="身份证号码">{{ returnForm.personCertNo }}</el-descriptions-item>
                <el-descriptions-item label="附件" :span="3">
                  <el-image v-if="returnForm.certNoPhotoOss && returnForm.certNoPhotoOss.length > 0"
                            v-for="(pic,pindex) in returnForm.certNoPhotoOss"
                            style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')"
                            fit="scale-down"
                            :preview-src-list="ossTransfer(returnForm.certNoPhotoOss,'list')"
                  ></el-image>
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
            <el-card class="mt20" shadow="never" v-if="checkCtrl">
              <div slot="header" class="clearfix">
                <span>审核信息</span>
              </div>
              <el-form ref="form" :model="checkForm">
                <el-form-item prop="checkStatus">
                  <el-radio-group v-model="form.checkStatus">
                    <el-radio :label="1">审核通过</el-radio>
                    <el-radio :label="2">审核不通过</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
              <div class="mt10 fl mb10">
                <el-button type="primary" :loading="buttonLoading" @click="submitCheckForm" size="mini">确 定</el-button>
                <el-button @click="handleClose" size="mini">取 消</el-button>
              </div>
            </el-card>
            <el-card v-if="show" class="mt10" shadow="hover">
              <el-descriptions title="下发信息" :column="3" border>
                <el-descriptions-item label="存放位置" :span="3">
                  <el-radio-group v-model="sendTaskForm.storeId">
                    <el-radio-button v-for="item in storeOptions" :key="item.id" :label="item.id">
                      {{ item.label }}
                    </el-radio-button>
                  </el-radio-group>
                </el-descriptions-item>
                <el-descriptions-item label="承运商" :span="3">
                  <el-radio-group v-model="sendTaskForm.carrierDeptId">
                    <el-radio-button v-for="item in carrierOptions" :key="item.deptId" :label="item.deptId">
                      {{ item.carrierName }}
                    </el-radio-button>
                  </el-radio-group>
                </el-descriptions-item>
                <template>
                  <el-descriptions-item label="派遣车辆" :span="2">
                    <el-select v-model="sendTaskForm.carId">
                      <el-option v-for="item in carOptions" :key="item.id" :label="item.carNumber" :value="item.id"
                      ></el-option>
                    </el-select>
                  </el-descriptions-item>
                  <el-descriptions-item label="取件人" :span="1">
                    <el-select v-model="sendTaskForm.pickupId">
                      <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName"
                                 :value="item.userId"
                      ></el-option>
                    </el-select>
                  </el-descriptions-item>
                </template>
              </el-descriptions>
              <div class="mt10 fr mb10">
                <el-button type="primary" :loading="buttonLoading" @click="submitForm" size="mini">确 定</el-button>
                <el-button @click="handleClose" size="mini">取 消</el-button>
              </div>
            </el-card>
            <handover-order :form="form" :handoverOptions="handoverOptions"
                            v-if="handoverOptions == null || handoverOptions.length == 0"
            ></handover-order>
          </el-tab-pane>
          <el-tab-pane label="物品清单" name="2">
            <el-table :data="form.items" border stripe>
              <el-table-column type="index" width="55" align="center"></el-table-column>
              <el-table-column label="物品编号" align="left" prop="pno" width="260">
                <template slot-scope="scope">
                  <span>{{ scope.row.pno }}</span>
                </template>
              </el-table-column>
              <el-table-column label="物品名称" align="left" prop="name" width="200">
                <template slot-scope="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" align="center" prop="nums" width="75">
                <template slot-scope="scope">
                  <span>{{ scope.row.nums }}</span>
                </template>
              </el-table-column>
              <el-table-column label="处置类型" align="center" prop="dealType" width="100">
                <template slot-scope="scope">
                  <dict-tag :options="dict.type.deal_type" :value="scope.row.dealType"/>
                </template>
              </el-table-column>
              <el-table-column label="图片" align="left" prop="oss">
                <template slot-scope="scope">
                  <el-image v-if="scope.row.oss && scope.row.oss.length > 0" v-for="(pic,pindex) in scope.row.oss"
                            style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                            fit="scale-down"
                            :preview-src-list="ossTransfer(scope.row.oss,'list')"
                  ></el-image>
                </template>
              </el-table-column>
              <el-table-column label="文书" prop="wsPdf" width="220">
                <template slot-scope="scope">
                  <template v-for="item in scope.row.pdfList">
                    <el-link type="primary" target="_blank" :href="getPdfUrl(item)">
                      <el-tooltip class="item" effect="dark" :content="getPdfName(item)" placement="top-start">
                        <el-button size="mini" type="text">
                          {{
                            getPdfName(item) && getPdfName(item).length > 20 ? getPdfName(item).substring(0, 20) + '...' : getPdfName(item)
                          }}
                        </el-button>
                      </el-tooltip>
                    </el-link>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="交接信息" name="3" v-if="handoverOptions && handoverOptions.length > 0">
            <handover-order :form="form" :handoverOptions="handoverOptions"
                            v-if="handoverOptions && handoverOptions.length > 0"
            ></handover-order>
          </el-tab-pane>
          <el-tab-pane label="交接原件" name="4" v-if="handoverOssList && handoverOssList.length > 0">
            <el-image v-for="(pic,pindex) in handoverOssList"
                      style="width: 100%;" :src="ossTransfer(pic,'list')" fit="scale-down"
                      :preview-src-list="ossTransfer(handoverOssList,'list')"
            ></el-image>
          </el-tab-pane>
          <el-tab-pane label="配送信息" name="5" v-if="orderOptions">
            <el-tabs tab-position="left">
              <el-tab-pane label="订单信息">
                <el-descriptions title="基本信息" :column="3" border>
                  <el-descriptions-item label="订单编号">{{ orderOptions.orderNo }}</el-descriptions-item>
                  <el-descriptions-item label="所属部门">{{ orderOptions.deptName }}</el-descriptions-item>
                  <el-descriptions-item label="物品数量">{{ orderOptions.nums }}</el-descriptions-item>
                  <el-descriptions-item label="客户名称" v-if="orderOptions.clientName">{{ orderOptions.clientName }}
                  </el-descriptions-item>
                  <el-descriptions-item label="联系人" v-if="orderOptions.clientContacts">
                    {{ orderOptions.clientContacts }}
                  </el-descriptions-item>
                  <el-descriptions-item label="联系电话" v-if="orderOptions.clientTel">{{ orderOptions.clientTel }}
                  </el-descriptions-item>
                  <el-descriptions-item label="备注" :span="3">{{ orderOptions.memo }}</el-descriptions-item>
                </el-descriptions>
                <el-descriptions title="寄收地址" :column="3" border style="margin-top: 15px;">
                  <el-descriptions-item label="寄件单位">{{ orderOptions.sendAddr }}</el-descriptions-item>
                  <el-descriptions-item label="寄件联系人">{{ orderOptions.sendContacts }}</el-descriptions-item>
                  <el-descriptions-item label="联系方式">{{ orderOptions.sendTel }}</el-descriptions-item>
                  <el-descriptions-item label="寄件地址" :span="3">{{ orderOptions.sendAddress }}</el-descriptions-item>
                  <el-descriptions-item label="收件单位">{{ orderOptions.takeAddr }}</el-descriptions-item>
                  <el-descriptions-item label="收件联系人">{{ orderOptions.takeContacts }}</el-descriptions-item>
                  <el-descriptions-item label="联系方式">{{ orderOptions.takeTel }}</el-descriptions-item>
                  <el-descriptions-item label="收件地址" :span="3">{{ orderOptions.takeAddress }}</el-descriptions-item>
                </el-descriptions>
                <el-card style="margin-top: 15px;">
                  <div slot="header" class="clearfix">
                    <span style="font-weight: bold;">物品清单</span>
                  </div>
                  <el-table :data="orderOptions.items">
                    <el-table-column label="编号" prop="pno"/>
                    <el-table-column label="名称" prop="name"/>
                    <el-table-column label="数量" prop="nums"/>
                  </el-table>
                </el-card>
                <el-card v-if="form.buss == '1'">
                  <div slot="header" class="clearfix">
                    <span>车辆附件</span>
                  </div>
                  <el-card class="fl mr10 mb10" style="width: 32%">
                    <div slot="header" class="clearfix">
                      <span>全车外观</span>
                    </div>
                    <el-image v-if="orderOptions.facadeOss && orderOptions.facadeOss.length > 0"
                              v-for="(pic,pindex) in orderOptions.facadeOss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                              fit="scale-down"
                              :preview-src-list="ossTransfer(orderOptions.facadeOss,'list')"
                    ></el-image>
                  </el-card>
                  <el-card class="fl mr10 mb10" style="width: 32%">
                    <div slot="header" class="clearfix">
                      <span>车架号</span>
                    </div>
                    <el-image v-if="orderOptions.carOss && orderOptions.carOss.length > 0"
                              v-for="(pic,pindex) in orderOptions.carOss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                              fit="scale-down"
                              :preview-src-list="ossTransfer(orderOptions.carOss,'list')"
                    ></el-image>
                  </el-card>
                  <el-card class="fl mr10 mb10" style="width: 32%">
                    <div slot="header" class="clearfix">
                      <span>交接现场</span>
                    </div>
                    <el-image v-if="orderOptions.handoverOss && orderOptions.handoverOss.length > 0"
                              v-for="(pic,pindex) in orderOptions.handoverOss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                              fit="scale-down"
                              :preview-src-list="ossTransfer(orderOptions.handoverOss,'list')"
                    ></el-image>
                  </el-card>
                  <el-card class="fl mr10 mb10" style="width: 32%"
                           v-if="orderOptions.loadOss && orderOptions.loadOss.length > 0"
                  >
                    <div slot="header" class="clearfix">
                      <span>45度装车</span>
                    </div>
                    <el-image v-if="orderOptions.loadOss && orderOptions.loadOss.length > 0"
                              v-for="(pic,pindex) in orderOptions.loadOss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                              fit="scale-down"
                              :preview-src-list="ossTransfer(orderOptions.loadOss,'list')"
                    ></el-image>
                  </el-card>
                  <el-card class="fl mr10 mb10" style="width: 32%">
                    <div slot="header" class="clearfix">
                      <span>外观瑕疵</span>
                    </div>
                    <el-image v-if="orderOptions.flawOss && orderOptions.flawOss.length > 0"
                              v-for="(pic,pindex) in orderOptions.flawOss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                              fit="scale-down"
                              :preview-src-list="ossTransfer(orderOptions.flawOss,'list')"
                    ></el-image>
                  </el-card>
                  <el-card class="fl mr10 mb10" style="width: 32%">
                    <div slot="header" class="clearfix">
                      <span>到达目的地</span>
                    </div>
                    <el-image v-if="orderOptions.takeOss && orderOptions.takeOss.length > 0"
                              v-for="(pic,pindex) in orderOptions.takeOss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                              fit="scale-down"
                              :preview-src-list="ossTransfer(orderOptions.takeOss,'list')"
                    ></el-image>
                  </el-card>
                  <el-card class="fl mr10 mb10" style="width: 32%">
                    <div slot="header" class="clearfix">
                      <span>卸车</span>
                    </div>
                    <el-image v-if="orderOptions.unloadOss && orderOptions.unloadOss.length > 0"
                              v-for="(pic,pindex) in orderOptions.unloadOss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                              fit="scale-down"
                              :preview-src-list="ossTransfer(orderOptions.unloadOss,'list')"
                    ></el-image>
                  </el-card>
                  <el-card class="fl mr10 mb10" style="width: 32%">
                    <div slot="header" class="clearfix">
                      <span>其他</span>
                    </div>
                    <el-image v-if="orderOptions.otherOss && orderOptions.otherOss.length > 0"
                              v-for="(pic,pindex) in orderOptions.otherOss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                              fit="scale-down"
                              :preview-src-list="ossTransfer(orderOptions.otherOss,'list')"
                    ></el-image>
                  </el-card>
                  <el-card class="fl mr10 mb10" style="width: 32%">
                    <div slot="header" class="clearfix">
                      <span>其他</span>
                    </div>
                    <el-image v-if="orderOptions.otherTwoOss && orderOptions.otherTwoOss.length > 0"
                              v-for="(pic,pindex) in orderOptions.otherTwoOss"
                              style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')"
                              fit="scale-down"
                              :preview-src-list="ossTransfer(orderOptions.otherTwoOss,'list')"
                    ></el-image>
                  </el-card>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="运单信息" v-if="orderOptions.wayItems && orderOptions.wayItems.length > 0">
                <template v-for="item in orderOptions.wayItems">
                  <el-steps :active="item.status == 2?0:(item.status == 3?1:(item.status == 5?2:3))" align-center
                            process-status="finish" finish-status="success" simple style="margin-bottom: 10px;"
                  >
                    <el-step title="发车"></el-step>
                    <el-step title="到达"></el-step>
                    <el-step title="签收"></el-step>
                    <el-step title="完成"></el-step>
                  </el-steps>
                  <el-tabs v-model="wayName">
                    <el-tab-pane label="基本信息" name="1">
                      <el-descriptions :column="3" border>
                        <el-descriptions-item label="运单编号">{{ item.waybillNo }}</el-descriptions-item>
                        <el-descriptions-item label="线路">{{ item.lineName }}</el-descriptions-item>
                        <el-descriptions-item label="车次">{{ item.scheduleName }}</el-descriptions-item>
                        <el-descriptions-item label="车牌号">{{ item.carNumber }}</el-descriptions-item>
                        <el-descriptions-item label="司机" :span="2">{{ item.driverName }}</el-descriptions-item>
                        <el-descriptions-item label="物品数量">{{ item.nums }}</el-descriptions-item>
                      </el-descriptions>
                    </el-tab-pane>
                    <el-tab-pane label="物品清单" name="2">
                      <el-card>
                        <el-table :data="item.items">
                          <el-table-column label="编号" prop="pno"/>
                          <el-table-column label="名称" prop="name"/>
                          <el-table-column label="数量" prop="nums"/>
                        </el-table>
                      </el-card>
                    </el-tab-pane>
                    <el-tab-pane label="日志跟踪" name="3">
                      <el-card>
                        <el-table :data="item.logItems">
                          <el-table-column label="操作人" prop="operator"/>
                          <el-table-column label="节点名称">
                            <template slot-scope="scope">
                              <dict-tag :options="dict.type.tms_track_log_type" :value="scope.row.type"/>
                            </template>
                          </el-table-column>
                          <el-table-column label="操作时间" prop="createTime"></el-table-column>
                          <el-table-column label="备注" prop="memeo"/>
                        </el-table>
                      </el-card>
                    </el-tab-pane>
                  </el-tabs>
                </template>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="挑拣任务" name="6" v-if="putTaskOptions && putTaskOptions.length > 0">
            <template v-for="item in putTaskOptions">
              <el-card style="margin-bottom: 15px;">
                <el-descriptions :column="3" border>
                  <el-descriptions-item label="任务编号">{{ item.pickNo }}</el-descriptions-item>
                  <el-descriptions-item label="挑拣员">{{ item.nickName }}</el-descriptions-item>
                  <el-descriptions-item label="状态">
                    <dict-tag :options="dict.type.wms_pick_task_status" :value="item.status"/>
                  </el-descriptions-item>
                </el-descriptions>
                <el-card style="margin-top: 15px;" shadow="never">
                  <div slot="header" class="clearfix">
                    <span>物品清单</span>
                  </div>
                  <el-table :data="item.items">
                    <el-table-column label="编号" prop="pno"/>
                    <el-table-column label="名称" prop="name"/>
                    <el-table-column label="数量" prop="nums"/>
                    <el-table-column label="状态" prop="nums">
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.wms_pick_task_status" :value="scope.row.status"/>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-card>
            </template>
          </el-tab-pane>
          <el-tab-pane label="操作日志" name="7">
            <el-table :data="logOptions" border stripe>
              <el-table-column label="序号" type="index" width="50" align="center"/>
              <el-table-column label="操作时间" align="left" prop="logTime" width="180"/>
              <el-table-column label="操作人" align="left" prop="operator" width="200"/>
              <el-table-column label="操作内容" align="left" prop="content"/>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="委托处置清单原件" name="8"
                       v-if="dealsOssList && dealsOssList.length > 0 && form.type == '2' && form.isTrailer == '1'"
          >
            <el-image v-for="(pic,pindex) in dealsOssList"
                      style="width: 100%;" :src="ossTransfer(pic,'list')" fit="scale-down"
                      :preview-src-list="ossTransfer(handoverOssList,'list')"
            ></el-image>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-drawer>
    <el-dialog :visible.sync="showAll" :before-close="handleClose" title="下发信息" width="55%">
      <el-descriptions :column="3" border>
        <el-descriptions-item label="存放位置" :span="3">
          <el-radio-group v-model="sendTaskForm.storeId">
            <el-radio-button v-for="item in storeOptions" :key="item.id" :label="item.id">
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </el-descriptions-item>
        <el-descriptions-item label="承运商" :span="3">
          <el-radio-group v-model="sendTaskForm.carrierDeptId">
            <el-radio-button v-for="item in carrierOptions" :key="item.deptId" :label="item.deptId">
              {{ item.carrierName }}
            </el-radio-button>
          </el-radio-group>
        </el-descriptions-item>
        <template>
          <el-descriptions-item label="派遣车辆" :span="2">
            <el-select v-model="sendTaskForm.carId">
              <el-option v-for="item in carOptions" :key="item.id" :label="item.carNumber" :value="item.id"></el-option>
            </el-select>
          </el-descriptions-item>
          <el-descriptions-item label="取件人" :span="1">
            <el-select v-model="sendTaskForm.pickupId">
              <el-option v-for="item in userOptions" :key="item.userId" :label="item.nickName" :value="item.userId"
              ></el-option>
            </el-select>
          </el-descriptions-item>
        </template>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="buttonLoading" @click="submitAllForm" size="mini">确 定</el-button>
        <el-button @click="handleCloseAll" size="mini">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { storeTreeselect, listStore, delStore } from '@/api/wms/store'
import { treeselect } from '@/api/system/dept'
import { listTask, getTask, getStatisticsTask, disposalFinish } from '@/api/oms/task'
import { getCarrierUser } from '@/api/center/index'
import { sendsTask, check } from '@/api/oms/dealTask'
import { listHandover, listHandoverInfo } from '@/api/wms/handover'
import { listOss } from '@/api/system/oss'
import { getOrderTask } from '@/api/tms/order'
import { getPickTask } from '@/api/wms/pick'
import { listOperatorLog } from '@/api/oms/operatorLog'
import { listCarrier } from '@/api/tms/carrier'
import { listCar } from '@/api/tms/car'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { htmlToPdf, htmlToPdfInfo } from '@/utils/pdf.js'

export default {
  dicts: ['tms_track_log_type', 'oms_delivery_type', 'oms_task_type', 'oms_task_source', 'oms_task_status', 'oms_property_type', 'handover_dtl_status', 'oms_send_status', 'wms_pick_task_status', 'wms_delivery_type', 'deal_type', 'oms_out_delivery_type', 'is_trailer_status'],
  components: { Treeselect },
  data() {
    return {
      /**
       * 左侧筛选
       */
      storeName: undefined,
      storeOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      returnForm: {},
      statisticsOptions: [],

      /**
       * 右侧数据
       */
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 显示承运商搜索
      show: false,
      showAll: false,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      taskList: [],
      // 查询参数
      deptOptions: [],
      daterangeCreateTime: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: undefined,
        dealType: undefined,
        storeId: undefined,
        deptId: undefined,
        taskNo: undefined,
        delivery: undefined,
        status: undefined,
        orderTime: undefined,
        isTrailer: undefined,
        delFlag: '0',
        source: undefined,
        params: {
          beginCreateTime: undefined,
          endCreateTime: undefined
        }
      },
      //详情
      form: {},
      checkForm: {},
      checkCtrl: false,
      open: false,
      title: undefined,
      activeName: '1',
      wayName: '1',
      //详情-交接
      handoverOptions: [],
      //详情-订单
      orderOptions: {},
      //详情-上架
      putTaskOptions: {},
      //详情-日志
      logOptions: [],
      //承运商筛选
      carrierOptions: [],
      //车辆筛选
      carOptions: [],
      //派遣人筛选
      userOptions: [],
      handoverOssList: [],
      dealsOssList: [],
      carrierName: undefined,
      sendTaskForm: {
        carrierDeptId: undefined,
        storeId: undefined,
        carId: undefined,
        pickupId: undefined
      },
      rules: {
        carrierDeptId: [{
          required: true,
          message: '承运商不能为空',
          trigger: 'change'
        }],
        storeId: [{
          required: true,
          message: '存放位置不能为空',
          trigger: 'change'
        }]
      },
      buttonLoading: false,

      tabs: [
        { label: undefined, name: '全部', badge: undefined, value: undefined, delivery: undefined },
        { label: '0', name: '待下发', badge: undefined, value: '0', delivery: '0' },
        { label: '1', name: '已下发', badge: undefined, value: '1', delivery: undefined }
      ],
      isFour: false,
      xzTabVal: 0,
      xzTabs: [
        { label: '0', name: '刑事类', badge: undefined, xzType: 'xs', delFlag: '0', delivery: undefined },
        { label: '1', name: '行政类', badge: undefined, xzType: 'xz', delFlag: '0', delivery: '0' },
      ]
    }
  },
  activated() {
    const time = this.$route.query.t
    if (time != null && time != this.uniqueId) {
      this.uniqueId = time
      this.queryParams.pageNum = Number(this.$route.query.pageNum)
      this.getList()
    }
  },
  created() {
    this.queryParams.type = this.$router.currentRoute.query.type ? this.$router.currentRoute.query.type : '0'
    this.getStoreTreeselect()
    this.getList()
    this.getTreeselect()
    this.getStatistics()
    this.getUser()
  },
  watch: {
    'sendTaskForm.carrierDeptId': {
      handler(newVal) {
        if (newVal) {
          this.carrierOptions.forEach(item => {
            if (item.deptId == newVal) {
              this.carrierName = item.carrierName
            }
          })
          this.getCar(newVal)
        }
      }
    }
  },
  methods: {
    /** 查询出入库订单列表 */
    getList() {
      this.loading = true
      this.queryParams.params = {};
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams.params['beginCreateTime'] = this.daterangeCreateTime[0]
        this.queryParams.params['endCreateTime'] = this.daterangeCreateTime[1]
      }
      this.queryParams.xzType = this.xzTabVal;
      listTask(this.queryParams).then(response => {
        this.taskList = response.rows
        this.total = response.total
        this.loading = false

        this.tabs.forEach((item) => {
          if (item.label == this.queryParams.sendStatus) {
            item.badge = this.total
          } else {
            item.badge = undefined
          }
        })
      })
    },
    radioChange(e) {
      this.tabs.forEach(item => {
        if (item.label == e) {
          this.queryParams.sendStatus = item.value
          this.queryParams.delivery = item.delivery
        }
      })
      this.getList()
    },
    xzTabChange(e){
      this.getList()
    },
    getStatistics() {
      getStatisticsTask({ type: '2', delFlag: '0' }).then(response => {
        this.statisticsOptions = response.data.result
      })
    },
    statisticsChange(item) {
      this.queryParams.region = item.region
      this.getList()
    },

    getShowFour(length, item) {
      if (length == 1 && item.htype == '0') {
        this.isFour = true
        return 6
      } else {
        this.isFour = false
        return 8
      }

    },

    /**
     * 左侧操作
     */
    /** 查询分类下拉树结构 */
    getStoreTreeselect() {
      storeTreeselect().then(response => {
        this.storeOptions = response.data
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.storeId = data.id
      this.form.storeId = data.id
      this.handleQuery()
    },
    /**
     * 右侧数据
     */
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data
      })
    },
    /** 查询订单信息 */
    getOrderInfo(id) {
      getOrderTask(id).then(response => {
        this.orderOptions = response.data
      })
    },
    /** 查询上架信息 */
    getPutTaskInfo(id) {
      getPickTask(id).then(response => {
        this.putTaskOptions = response.data
      })
    },
    /** 查询交接信息 */
    getHandover(id) {
      listHandoverInfo({ 'objid': id }).then(response => {
        this.handoverOptions = response.data
      })
    },
    /** 查询日志 */
    getLogs(id) {
      listOperatorLog({ 'objid': id }).then(response => {
        this.logOptions = response.rows
      })
    },
    /** 查询车辆 */
    getCar(carrierDeptId) {
      listCar({ carrierDeptId: carrierDeptId }).then(response => {
        // if(response.rows.length == 0 && this.carrierName.indexOf('车辆') == -1){
        //   this.$modal.notifyWarning("当前承运商暂无车辆信息，请联系该承运商！");
        // }
        this.carOptions = response.rows
      })
    },
    getUser() {
      getCarrierUser().then(response => {
        this.userOptions = response.data
      })
    },
    getHandoverOss(objid) {
      listOss({ 'objid': objid, 'buss': 'handoverDtl' }).then(response => {
        console.info('getHandoverOss======>', response)
        this.handoverOssList = response.rows
      })
    },
    getDealOss(objid) {
      listOss({ 'objid': objid, 'buss': 'dealsForm' }).then(response => {
        console.info('getHandoverOss======>', response)
        this.dealsOssList = response.rows
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      // if(this.queryParams.orderTime){
      //   this.queryParams.params.beginCreateTime = this.queryParams.orderTime+'00:00:00'
      //   this.queryParams.params.endCreateTime = this.queryParams.orderTime+'23:59:59'
      // }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeCreateTime = []
      this.resetForm('queryForm')
      // this.queryParams.orderTime = undefined;
      this.queryParams.params.beginCreateTime = undefined
      this.queryParams.params.endCreateTime = undefined
      this.queryParams.region = undefined
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    //查看详情
    handleInfo(row) {
      getTask(row.id).then(response => {
        this.form = response.data
        if (response.data.disposalInfo) {
          this.returnForm = response.data.disposalInfo
        }
        this.open = true
        this.title = '处置申请详情'
        this.activeName = '1'
        //交接明细
        this.getHandover(row.id)
        this.getOrderInfo(row.id)
        this.getPutTaskInfo(row.id)
        this.getLogs(row.id)
        this.getHandoverOss(row.id)
        if (row.type == '2' && row.isTrailer == '1') {
          this.getDealOss(row.id)
        }
      })
    },
    //查看详情
    handleCheck(row) {
      getTask(row.id).then(response => {
        this.checkForm = response.data
        this.form = response.data
        if (response.data.disposalInfo) {
          this.returnForm = response.data.disposalInfo
        }
        this.open = true
        this.title = '处置申请详情'
        this.activeName = '1'
        this.checkCtrl = true
        //交接明细
        this.getHandover(row.id)
        this.getOrderInfo(row.id)
        this.getPutTaskInfo(row.id)
        this.getLogs(row.id)
        this.getHandoverOss(row.id)
        if (row.type == '2' && row.isTrailer == '1') {
          this.getDealOss(row.id)
        }
      })
    },
    handleFinish(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认完成订单编号为"' + row.taskNo + '"的处置申请？').then(() => {
        this.loading = true
        return disposalFinish(ids)
      }).then(() => {
        this.loading = false
        this.getList()
      }).finally(() => {
        this.loading = false
      })
    },
    //详情关闭
    close() {
      this.open = false
      this.checkCtrl = false
    },
    //关闭
    handleClose() {
      this.show = false
      this.buttonLoading = false
      this.checkCtrl = false
    },
    handleCloseAll() {
      this.showAll = false
      this.buttonLoading = false
      this.checkCtrl = false
    },
    /**
     * 右侧列表-操作
     */
    //新增
    handleAdd() {
      this.$router.push({
        path: '/oms/dealInfo/add',
        query: {
          pageNum: this.queryParams.pageNum
        }
      })
    },
    //编辑
    handleUpdate(row) {
      const id = row.id || this.ids
      this.close()
      this.$router.push({
        path: '/oms/dealInfo/edit/' + id,
        query: {
          pageNum: this.queryParams.pageNum
        }
      })
    },
    handleExport() {
      this.download('/oms/task/disposal/apply/export', {
        ...this.queryParams
      }, `处置申请${new Date().getTime()}.xlsx`)
    },
    handleSendAll() {
      this.sendTaskForm = {}
      listCarrier().then(response => {
        this.carrierOptions = response.rows
        this.showAll = true
        this.carOptions = []
      })
    },
    handleSend(row) {
      this.sendTaskForm = {}
      this.sendTaskForm.id = row.id
      this.sendTaskForm.storeId = row.storeId
      listCarrier().then(response => {
        this.carrierOptions = response.rows
        this.show = true
        this.carOptions = []
      })

      // let content = '是否确认下发所选数据项?'
      // if(row.sendStatus == '1'){
      //   content = '已有下发数据，重新下发将覆盖原数据，是否下发?'
      // }
      // const ids = row.id || this.ids;
      // this.$modal.confirm(content).then(() => {
      //   this.loading = true;
      //   return sendsTask(ids);
      // }).then(() => {
      //   this.loading = false;
      //   this.getList();
      //   this.$modal.msgSuccess("下发成功");
      // }).finally(() => {
      //   this.loading = false;
      // });
    },
    /**
     * 打印交接单
     * @param {Object} title
     */
    handlePrint(title) {
      // const printOrder = this.$refs['printOrder'];
      htmlToPdf('#printOrder', title)
    },
    handlePrintInfo(title) {
      htmlToPdfInfo('#printOrder')
    },
    handlePrintPre(title) {
      // const printOrder = this.$refs['printOrder'];
      htmlToPdf('#printOrderPre', title)
    },
    submitAllForm() {
      let form = this.sendTaskForm

      if (!form.storeId) {
        this.$modal.msgError('请选择存放位置！')
        return false
      }
      if (!form.carrierDeptId) {
        this.$modal.msgError('请选择承运商！')
        return false
      }
      // if(!form.carId && this.carrierName.indexOf('车辆') == -1){
      //    this.$modal.msgError("请选择车辆！");
      //    return false;
      // }

      // if(!form.pickupId && this.carrierName.indexOf('车辆') == -1){
      //    this.$modal.msgError("请选择派遣人！");
      //    return false;
      // }

      this.buttonLoading = true
      let content = '是否确认下发所选数据项?'
      if (this.form.sendStatus == '1') {
        content = '已有下发数据，重新下发将覆盖原数据，是否下发?'
      }
      const ids = form.id || this.ids
      this.$modal.confirm(content).then(() => {
        this.loading = true
        form.ids = Array.isArray(ids) ? ids : [ids]
        return sendsTask(form)
      }).then(() => {
        this.$modal.msgSuccess('下发成功')
      }).finally(() => {
        this.loading = false
        this.buttonLoading = false
        this.handleCloseAll()
        this.close()
        this.getList()
      })
    },
    submitCheckForm() {
      let form = this.checkForm
      this.buttonLoading = true
      this.loading = true
      check(form).then(response => {
        this.$modal.msgSuccess('操作成功')
      }).finally(() => {
        this.loading = false
        this.buttonLoading = false
        this.handleClose()
        this.close()
        this.getList()
      })
    },
    submitForm() {
      let form = this.sendTaskForm
      if (this.form.isTrailer == '0') {
        if (!form.storeId) {
          this.$modal.msgError('请选择存放位置！')
          return false
        }
        if (!form.carrierDeptId) {
          this.$modal.msgError('请选择承运商！')
          return false
        }
      }

      // if(!form.carId && this.carrierName.indexOf('车辆') == -1){
      //    this.$modal.msgError("请选择车辆！");
      //    return false;
      // }

      // if(!form.pickupId && this.carrierName.indexOf('车辆') == -1){
      //    this.$modal.msgError("请选择派遣人！");
      //    return false;
      // }
      this.buttonLoading = true
      let content = '是否确认下发所选数据项?'
      if (this.form.sendStatus == '1') {
        content = '已有下发数据，重新下发将覆盖原数据，是否下发?'
      }
      const ids = form.id || this.ids
      this.$modal.confirm(content).then(() => {
        this.loading = true
        form.ids = Array.isArray(ids) ? ids : [ids]
        return sendsTask(form)
      }).then(() => {
        this.$modal.msgSuccess('下发成功')
      }).finally(() => {
        this.loading = false
        this.buttonLoading = false
        this.handleClose()
        this.close()
        this.getList()
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除出入库订单编号为"' + ids + '"的数据项？').then(() => {
        this.loading = true
        return delTask(ids)
      }).then(() => {
        this.loading = false
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).finally(() => {
        this.loading = false
      })
    },
    getPdfName(fileUrl) {
      let files = fileUrl.split('/')
      let _names = files[files.length - 1]
      let fileName = _names
      if (_names && _names.indexOf('_') != -1) {
        let fileNames = _names.split('_')
        fileName = fileNames[fileNames.length - 1]
      }
      return fileName
    },
    getPdfUrl(fileUrl) {
      let markParams = {
        'text': '三明市安保信息科技有限公司',
        'fontSize': '20',
        'color': 'rgba(128,128,128,0.6)',
        'rotate': '330',
        'Place': 'middleCenter',
        'Rule': 'all',
        'tiling': 'false',
        'fontName': 'SimSun',
        'distanceX': '10',
        'distanceY': '10'
      }
      let host = location.hostname
      if (host == '192.168.1.256') {
        host = host.replace('192.168.1.256', '192.168.1.241')
      }
      if (host == '192.168.1.246') {
        host = host.replace('192.168.1.246', '192.168.1.241')
      }
      if (host == '10.49.241.156') {
        host = host.replace('10.49.241.156', '10.49.241.151')
      }
      let origin = location.protocol + '//' + host
      let url = origin + ':8095/reader?file=' + fileUrl + '&markParams=' + encodeURIComponent(JSON.stringify(markParams))
      return url
    }
  }
}
</script>
<style>
#handoverCard.box-card .el-card__header {
  border-bottom-color: #000;
}

/**
改变边框颜色
 */
#handoverCard.box-card .el-table {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  margin: 0 auto;
}

#handoverCard.box-card .el-table th {
  border: 1px solid black !important;
  border-right: none !important;
  border-bottom: none !important;
}

#handoverCard.box-card .el-table td {
  border: 1px solid black;
  border-right: none !important;
}

.el-badge__content.is-fixed {
  z-index: 1;
}
</style>
